<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        img{
            display: block;
        }
        .fs_col2{
            margin: 100px 300px;
            float: left;
            position: relative;
            width: 590px;
            height: 470px;
        }
        .fs_col2 .lbt{
            width: 590px;
            height: 470px;
            overflow: hidden;
            position: absolute;
            top: 0;
            left: 0;
        }
        .fs_col2 .lbt ul{
            width: 900%;
            position: absolute;
            top: 0;
            left: 0;
        }
        .fs_col2 .lbt li{
            float: left;
        }
        .fs_col2 a{
            display: block;
            height: 100%;
        }
        .fs_col2 button{
            cursor: pointer;
            width: 24px;
            height: 40px;
            background-color: rgba(0,0,0,.2);
            position: absolute;
            top: 50%;
            margin-top: -20px;
            z-index: 10;
        }
        .fs_col2 button.button1{
            left: 0;
        }
        .fs_col2 button.button2{
            right: 0;
        }
        .fs_col2 .yd{
            position: absolute;
            left: 210px;
            bottom: 20px;
            width: 210px;
            height: 22px;
        }
        .yd li{
            display: inline-block;
            width: 8px;
            height: 8px;
            border: 2px solid hsla(0,0%,100%,.4);
            border-radius: 6px;
            cursor: pointer;
            margin-right: 5px;
        }
        .yd .current{
            background: #fff;
        }
    </style>
    <script>
        $(function () {
            $(".fs_col2 .yd").append("<ul></ul>");
            for(var i=0;i<$(".lbt ul").find("li").length-1;i++){
                $(".yd ul").append("<li></li>");
            }
            $(".yd ul li").eq(0).addClass("current");

            var target = $(".lbt ul").position().left;var num=0;
            var timer = setInterval(autoplay,3000);
            function autoplay(){
                target-=590;
                num++;
                $(".lbt ul").animate({"left":target},1000);
                $(".yd li").eq(num).addClass("current").siblings().removeClass("current");
                if(target==-590*8){
                    target=0;
                    $(".lbt ul").animate({"left":target},0);
                }
                if(num==7){
                    num=-1;
                }
            }
            $(".button2").click(function () {
                target-=590;
                num++;
                $(".lbt ul").animate({"left":target},0);
                $(".yd li").eq(num).addClass("current").siblings().removeClass("current");
                if(target==-590*8){
                    target=0;
                    $(".lbt ul").animate({"left":target},0);
                }
                if(num==7){
                    num=-1;
                }
            })
            $(".button1").click(function () {
                target+=590;
                num--;
                $(".lbt ul").animate({"left":target},0);
                $(".yd li").eq(num).addClass("current").siblings().removeClass("current");
                if(target==590){
                    target=-7*590;
                    $(".lbt ul").animate({"left":target},0);
                }
                if(num==-1){
                    num=7;
                }
            })
            $(".fs_col2").mouseenter(function () {
                clearInterval(timer);
            }).mouseleave(function () {
               timer = setInterval(autoplay,3000);
            });
        })
    </script>
</head>
<body>
<div class="fs_col2" id="fs_col2">
    <button type="button" class="button1" id="button1">
        <i class="iconfont4">&#xe7ee;</i>
    </button>
    <div class="lbt">
        <ul>
            <li><a href="#"><img src="images/index_lbt/t0.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/index_lbt/t1.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/index_lbt/t2.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/index_lbt/t3.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/index_lbt/t4.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/index_lbt/t5.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/index_lbt/t6.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/index_lbt/t7.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/index_lbt/t0.jpg" alt=""/></a></li>
        </ul>
    </div>
    <button type="button" class="button2" id="button2">
        <i class="iconfont5">&#xe7ed;</i>
    </button>
    <div class="yd" id="yd"></div>
</div>
</body>
</html>